<template>
  <div class="stroke-user-profile">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <el-icon class="loading-icon" :size="48"><Loading /></el-icon>
      <p class="loading-text">加载中...</p>
    </div>

    <div class="container">
      <!-- 错误提示 -->
      <el-alert 
        v-if="error" 
        :title="error" 
        type="error" 
        show-icon 
        class="error-alert"
        @close="error = null"
      />

      <!-- 用户信息头部 -->
      <div class="user-header-section">
        <div class="user-basic-info">
          <el-avatar :size="120" :src="currentUser?.avatar || defaultAvatar">
            {{ getUserInitial(currentUser?.username) }}
          </el-avatar>
          <div class="user-details">
            <h1 class="user-name">{{ currentUser?.username || '加载中...' }}</h1>
            <div class="user-meta">
              <span class="meta-item" v-if="currentUser?.email">
                <el-icon><Message /></el-icon> {{ currentUser.email }}
              </span>
              <span class="meta-item" v-if="currentUser?.phone">
                <el-icon><Phone /></el-icon> {{ formatPhone(currentUser.phone) }}
              </span>
              <span class="meta-item" v-if="currentUser?.register_time">
                <el-icon><Calendar /></el-icon> 注册时间: {{ formatDate(currentUser.register_time) }}
              </span>
            </div>
            <div class="user-role-badge" v-if="currentUserRole">
              <el-tag :type="getRoleTagType(currentUserRole)" size="medium">
                {{ currentUserRole }}
              </el-tag>
              <span v-if="currentUserRole === '医生' && userCertification?.certification_status === '已认证'" class="certification-status">
                <el-icon><SuccessFilled /></el-icon> 已认证医生
              </span>
            </div>
          </div>
        </div>
        <div class="user-actions">
          <el-button type="primary" @click="showEditProfile = true" :disabled="!isCurrentUser">
            <el-icon><Edit /></el-icon> 编辑资料
          </el-button>
        </div>
      </div>

      <!-- 用户详情信息卡片区 -->
      <div class="user-info-cards">
        <el-card class="info-card" v-if="currentUser">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <div class="info-content">
            <div class="info-row">
              <span class="info-label">真实姓名：</span>
              <span class="info-value">{{ currentUser?.real_name || '未设置' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">性别：</span>
              <span class="info-value">{{ getGenderText(currentUser?.gender) || '未设置' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">身份证号：</span>
              <span class="info-value">{{ maskIdCard(currentUser?.id_card) || '未设置' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">联系地址：</span>
              <span class="info-value">{{ currentUser?.address || '未设置' }}</span>
            </div>
          </div>
        </el-card>

        <!-- 医生认证信息卡片 -->
        <el-card 
          class="info-card doctor-card" 
          v-if="currentUserRole === '医生' && userCertification"
        >
          <template #header>
            <div class="card-header">
              <span>医生认证信息</span>
            </div>
          </template>
          <div class="info-content">
            <div class="info-row">
              <span class="info-label">执业证书编号：</span>
              <span class="info-value">{{ userCertification?.license_number || '未设置' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">专业领域：</span>
              <span class="info-value">{{ userCertification?.specialty || '未设置' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">医生等级：</span>
              <span class="info-value">{{ userCertification?.doctor_level || '未设置' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">所属医院：</span>
              <span class="info-value">{{ userCertification?.hospital || '未设置' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">认证状态：</span>
              <span class="info-value certification-status" :class="`status-${userCertification?.certification_status}`">
                {{ getCertificationStatusText(userCertification.certification_status) }}
              </span>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 权限差异化内容区 -->
      <div class="content-section">
        <h2 class="section-title">
          <el-icon><UserFilled /></el-icon> 医生列表
        </h2>
        <el-divider />

        <!-- 搜索和筛选 -->
        <div class="search-filter">
          <el-input
            v-model="searchQuery"
            placeholder="搜索医生姓名、专业或医院"
            clearable
            prefix-icon="Search"
            class="search-input"
          />
          <el-select
            v-model="specialtyFilter"
            placeholder="选择专业"
            clearable
            class="filter-select"
          >
            <el-option
              v-for="specialty in specialties"
              :key="specialty"
              :label="specialty"
              :value="specialty"
            />
          </el-select>
          <el-select
            v-model="levelFilter"
            placeholder="选择医生等级"
            clearable
            class="filter-select"
          >
            <el-option
              v-for="level in doctorLevels"
              :key="level"
              :label="level"
              :value="level"
            />
          </el-select>
        </div>

        <!-- 医生列表 -->
        <div v-if="filteredDoctors.length > 0" class="doctors-grid">
          <el-card
            v-for="doctor in filteredDoctors"
            :key="doctor.user_id"
            class="doctor-card-item hover-effect"
          >
            <div class="doctor-info">
              <div class="doctor-avatar-section">
                <el-avatar :size="80" :src="doctor.avatar || defaultAvatar">
                  {{ getUserInitial(doctor.username) }}
                </el-avatar>
                <div class="doctor-name-section">
                  <h3 class="doctor-name">{{ doctor.real_name || doctor.username }}</h3>
                  <div class="doctor-level">
                    <el-tag :type="getLevelTagType(doctorCertificationsMap[doctor.user_id]?.doctor_level)">
                      {{ doctorCertificationsMap[doctor.user_id]?.doctor_level || '未设置' }}
                    </el-tag>
                  </div>
                </div>
              </div>
              <div class="doctor-details">
                <p><strong>专业领域：</strong>{{ doctorCertificationsMap[doctor.user_id]?.specialty || '未设置' }}</p>
                <p><strong>所属医院：</strong>{{ doctorCertificationsMap[doctor.user_id]?.hospital || '未设置' }}</p>
                <p><strong>执业证书编号：</strong>{{ doctorCertificationsMap[doctor.user_id]?.license_number || '未设置' }}</p>
                <p class="certification-status">
                  <strong>认证状态：</strong>
                  <span :class="`status-${doctorCertificationsMap[doctor.user_id]?.certification_status}`">
                    {{ getCertificationStatusText(doctorCertificationsMap[doctor.user_id]?.certification_status) }}
                  </span>
                </p>
              </div>
              <div class="doctor-actions">
                <el-button type="primary" @click="viewDoctorDetail(doctor.user_id)">
                  查看详情
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
        <div v-else-if="doctorsLoading" class="loading-center">
          <el-icon class="loading-icon" :size="48"><Loading /></el-icon>
        </div>
        <el-empty v-else description="暂无符合条件的医生" />
      </div>
    </div>

    <!-- 编辑资料对话框 -->
    <el-dialog
      v-model="showEditProfile"
      title="编辑个人资料"
      width="600px"
      :before-close="handleCloseEdit"
    >
      <el-form 
        :model="editForm" 
        :rules="editRules" 
        ref="editFormRef"
        class="edit-form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" placeholder="请输入用户名" disabled />
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input v-model="editForm.real_name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="editForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" type="email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="联系地址" prop="address">
          <el-input v-model="editForm.address" placeholder="请输入联系地址" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdateProfile">保存</el-button>
          <el-button @click="showEditProfile = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 医生详情对话框 -->
    <el-dialog
      v-model="showDoctorDetail"
      :title="`医生详情 - ${selectedDoctor?.real_name || selectedDoctor?.username}`"
      width="700px"
    >
      <div v-if="selectedDoctor" class="doctor-detail-content">
        <div class="doctor-detail-header">
          <el-avatar :size="100" :src="selectedDoctor.avatar || defaultAvatar">
            {{ getUserInitial(selectedDoctor.username) }}
          </el-avatar>
          <div class="doctor-detail-info">
            <h2>{{ selectedDoctor.real_name || selectedDoctor.username }}</h2>
            <div class="doctor-detail-tags">
              <el-tag :type="getLevelTagType(selectedDoctorCertification?.doctor_level)">
                {{ selectedDoctorCertification?.doctor_level || '未设置' }}
              </el-tag>
              <el-tag :type="getCertificationTagType(selectedDoctorCertification?.certification_status)">
                {{ getCertificationStatusText(selectedDoctorCertification?.certification_status) }}
              </el-tag>
            </div>
          </div>
        </div>
        <el-divider />
        <div class="doctor-detail-sections">
          <div class="detail-section">
            <h3>基本信息</h3>
            <div class="detail-item">
              <span class="detail-label">用户名：</span>
              <span class="detail-value">{{ selectedDoctor.username }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">性别：</span>
              <span class="detail-value">{{ getGenderText(selectedDoctor.gender) || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">邮箱：</span>
              <span class="detail-value">{{ selectedDoctor.email || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">手机号码：</span>
              <span class="detail-value">{{ selectedDoctor.phone || '未设置' }}</span>
            </div>
          </div>
          <el-divider />
          <div class="detail-section" v-if="selectedDoctorCertification">
            <h3>专业资质</h3>
            <div class="detail-item">
              <span class="detail-label">执业证书编号：</span>
              <span class="detail-value">{{ selectedDoctorCertification.license_number || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">专业领域：</span>
              <span class="detail-value">{{ selectedDoctorCertification.specialty || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">所属医院：</span>
              <span class="detail-value">{{ selectedDoctorCertification.hospital || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">认证时间：</span>
              <span class="detail-value">{{ formatDate(selectedDoctorCertification.certification_time) || '未设置' }}</span>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无医生信息" />
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  UserFilled, Edit, Calendar, Phone, Message, 
  Search, SuccessFilled, Loading
} from '@element-plus/icons-vue'
import { useUserStore } from '../store/userStore'

export default {
  name: 'StrokeUserProfileView',
  components: {
    UserFilled,
    Edit,
    Calendar,
    Phone,
    Message,
    Search,
    SuccessFilled,
    Loading
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const userStore = useUserStore()
    
    // 响应式数据
    const loading = ref(false)
    const doctorsLoading = ref(false)
    const error = ref(null)
    const showEditProfile = ref(false)
    const showDoctorDetail = ref(false)
    const editFormRef = ref(null)
    const userId = computed(() => route.params.id)
    
    // 用户数据
    const currentUser = ref(null)
    const currentUserRole = ref('')
    const userCertification = ref(null)
    
    // 医生列表数据
    const doctors = ref([])
    const allUsers = ref([])
    const allCertifications = ref([])
    const doctorsCertificationsMap = ref({})
    const selectedDoctor = ref(null)
    const selectedDoctorCertification = ref(null)
    
    // 搜索和筛选
    const searchQuery = ref('')
    const specialtyFilter = ref('')
    const levelFilter = ref('')
    
    // 常量数据
    const defaultAvatar = '/default-avatar.png'
    const specialties = ['神经内科', '神经外科', '心内科', '急诊医学', '康复医学', '影像医学']
    const doctorLevels = ['主任医师', '副主任医师', '主治医师', '住院医师', '助理医师']
    
    // 表单数据
    const editForm = reactive({
      username: '',
      real_name: '',
      gender: '',
      email: '',
      phone: '',
      address: ''
    })
    
    const editRules = reactive({
      real_name: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
      ],
      email: [
        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
      ],
      phone: [
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
      ]
    })
    
    // 计算属性
    const isCurrentUser = computed(() => {
      return userStore.currentUser && userStore.currentUser.user_id === parseInt(userId.value)
    })
    
    // 获取已认证的医生列表
    const certifiedDoctors = computed(() => {
      return doctors.value.filter(doctor => {
        const certification = doctorsCertificationsMap.value[doctor.user_id]
        return certification && certification.certification_status === '已认证'
      })
    })
    
    // 过滤后的医生列表
    const filteredDoctors = computed(() => {
      return certifiedDoctors.value.filter(doctor => {
        const certification = doctorsCertificationsMap.value[doctor.user_id]
        
        // 搜索过滤
        const matchesSearch = !searchQuery.value || 
          doctor.real_name?.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          doctor.username?.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          certification?.specialty?.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          certification?.hospital?.toLowerCase().includes(searchQuery.value.toLowerCase())
        
        // 专业过滤
        const matchesSpecialty = !specialtyFilter.value || 
          certification?.specialty === specialtyFilter.value
        
        // 等级过滤
        const matchesLevel = !levelFilter.value || 
          certification?.doctor_level === levelFilter.value
        
        return matchesSearch && matchesSpecialty && matchesLevel
      })
    })
    
    // 方法
    const loadUserData = async () => {
      try {
        loading.value = true
        error.value = null
        
        // 获取用户信息
        const userResponse = await fetch(`http://localhost:3000/users?user_id=${userId.value}`)
        const userData = await userResponse.json()
        
        if (userData.length === 0) {
          throw new Error('用户不存在')
        }
        
        currentUser.value = userData[0]
        
        // 获取用户角色
        const roleResponse = await fetch(`http://localhost:3000/用户角色关联?用户ID=${userId.value}`)
        const roleData = await roleResponse.json()
        
        if (roleData.length > 0) {
          const roleId = roleData[0].角色ID
          const roleInfoResponse = await fetch(`http://localhost:3000/角色?角色ID=${roleId}`)
          const roleInfo = await roleInfoResponse.json()
          
          if (roleInfo.length > 0) {
            currentUserRole.value = roleInfo[0].角色名称
          }
        }
        
        // 如果是医生，获取认证信息
        if (currentUserRole.value === '医生') {
          await loadUserCertification()
        }
        
        // 更新编辑表单
        updateEditForm(currentUser.value)
        
      } catch (err) {
        console.error('加载用户数据失败:', err)
        error.value = err.message || '加载用户数据失败'
      } finally {
        loading.value = false
      }
    }
    
    const loadUserCertification = async () => {
      try {
        const certResponse = await fetch(`http://localhost:3000/用户机构认证?用户ID=${userId.value}`)
        const certData = await certResponse.json()
        
        if (certData.length > 0) {
          userCertification.value = certData[0]
        }
      } catch (err) {
        console.error('加载认证信息失败:', err)
      }
    }
    
    const loadDoctors = async () => {
      try {
        doctorsLoading.value = true
        
        // 获取所有用户
        const usersResponse = await fetch('http://localhost:3000/users')
        allUsers.value = await usersResponse.json()
        
        // 获取所有用户角色关联
        const roleRelationsResponse = await fetch('http://localhost:3000/用户角色关联')
        const roleRelations = await roleRelationsResponse.json()
        
        // 获取所有角色信息
        const rolesResponse = await fetch('http://localhost:3000/角色')
        const roles = await rolesResponse.json()
        
        // 构建角色映射
        const roleMap = {}
        roles.forEach(role => {
          roleMap[role.角色ID] = role.角色名称
        })
        
        // 筛选出医生用户
        const doctorUserIds = roleRelations
          .filter(relation => roleMap[relation.角色ID] === '医生')
          .map(relation => relation.用户ID)
        
        doctors.value = allUsers.value.filter(user => 
          doctorUserIds.includes(user.user_id)
        )
        
        // 获取所有认证信息
        const certificationsResponse = await fetch('http://localhost:3000/用户机构认证')
        allCertifications.value = await certificationsResponse.json()
        
        // 构建医生认证映射
        allCertifications.value.forEach(cert => {
          doctorsCertificationsMap.value[cert.用户ID] = cert
        })
        
      } catch (err) {
        console.error('加载医生列表失败:', err)
        // 使用模拟数据
        loadMockDoctors()
      } finally {
        doctorsLoading.value = false
      }
    }
    
    // 加载模拟医生数据
    const loadMockDoctors = () => {
      doctors.value = [
        {
          user_id: 2,
          username: 'dr_zhang',
          real_name: '张医生',
          gender: '男',
          email: 'zhang@hospital.com',
          phone: '13800138001',
          register_time: '2023-01-01T00:00:00Z'
        },
        {
          user_id: 3,
          username: 'dr_li',
          real_name: '李医生',
          gender: '女',
          email: 'li@hospital.com',
          phone: '13900139001',
          register_time: '2023-02-01T00:00:00Z'
        }
      ]
      
      doctorsCertificationsMap.value = {
        2: {
          认证ID: 1,
          用户ID: 2,
          机构ID: 1,
          执业证书编号: '1234567890',
          专业领域: '神经内科',
          医生等级: '主任医师',
          医院: '北京协和医院',
          认证状态: '已认证',
          认证时间: '2023-01-15T00:00:00Z'
        },
        3: {
          认证ID: 2,
          用户ID: 3,
          机构ID: 2,
          执业证书编号: '0987654321',
          专业领域: '神经外科',
          医生等级: '副主任医师',
          医院: '上海第一人民医院',
          认证状态: '已认证',
          认证时间: '2023-02-15T00:00:00Z'
        }
      }
    }
    
    const updateEditForm = (user) => {
      editForm.username = user.username || ''
      editForm.real_name = user.real_name || ''
      editForm.gender = user.gender || ''
      editForm.email = user.email || ''
      editForm.phone = user.phone || ''
      editForm.address = user.address || ''
    }
    
    const handleCloseEdit = () => {
      // 重置表单
      if (editFormRef.value) {
        editFormRef.value.resetFields()
      }
      updateEditForm(currentUser.value)
    }
    
    const handleUpdateProfile = async () => {
      if (!editFormRef.value) return
      
      try {
        await editFormRef.value.validate()
        
        // 更新用户信息
        const response = await fetch(`http://localhost:3000/users/${currentUser.value.id || currentUser.value.user_id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            ...currentUser.value,
            ...editForm
          })
        })
        
        if (!response.ok) {
          throw new Error('更新失败')
        }
        
        const updatedUser = await response.json()
        currentUser.value = updatedUser
        
        // 更新本地存储
        if (isCurrentUser.value && userStore.currentUser) {
          userStore.currentUser = updatedUser
          localStorage.setItem('userData', JSON.stringify(updatedUser))
        }
        
        ElMessage.success('个人资料更新成功')
        showEditProfile.value = false
      } catch (err) {
        console.error('更新个人资料失败:', err)
        ElMessage.error(err.message || '更新失败，请稍后重试')
      }
    }
    
    const viewDoctorDetail = async (doctorId) => {
      try {
        // 查找医生信息
        selectedDoctor.value = allUsers.value.find(user => user.user_id === doctorId) || 
                              doctors.value.find(doctor => doctor.user_id === doctorId)
        
        // 查找认证信息
        selectedDoctorCertification.value = allCertifications.value.find(
          cert => cert.用户ID === doctorId
        ) || doctorsCertificationsMap.value[doctorId]
        
        showDoctorDetail.value = true
      } catch (err) {
        console.error('加载医生详情失败:', err)
        ElMessage.error('加载医生详情失败')
      }
    }
    
    // 辅助函数
    const getUserInitial = (username) => {
      if (!username) return '?'
      return username.charAt(0).toUpperCase()
    }
    
    const formatDate = (dateString) => {
      if (!dateString) return ''
      return new Date(dateString).toLocaleDateString('zh-CN')
    }
    
    const formatPhone = (phone) => {
      if (!phone || phone.length !== 11) return phone
      return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
    }
    
    const maskIdCard = (idCard) => {
      if (!idCard || idCard.length < 10) return idCard
      const start = idCard.substring(0, 3)
      const end = idCard.substring(idCard.length - 4)
      return start + '*'.repeat(idCard.length - 7) + end
    }
    
    const getGenderText = (gender) => {
      const genderMap = {
        'male': '男',
        'female': '女',
        '男': '男',
        '女': '女',
        '其他': '其他'
      }
      return genderMap[gender]
    }
    
    const getRoleTagType = (role) => {
      const roleMap = {
        '管理员': 'danger',
        '医生': 'primary',
        '普通用户': 'success'
      }
      return roleMap[role] || 'info'
    }
    
    const getLevelTagType = (level) => {
      const levelMap = {
        '主任医师': 'danger',
        '副主任医师': 'warning',
        '主治医师': 'primary',
        '住院医师': 'info',
        '助理医师': 'success'
      }
      return levelMap[level] || 'info'
    }
    
    const getCertificationStatusText = (status) => {
      const statusMap = {
        '已认证': '已认证',
        '待认证': '待认证',
        '认证失败': '认证失败',
        '未认证': '未认证'
      }
      return statusMap[status] || '未认证'
    }
    
    const getCertificationTagType = (status) => {
      const statusMap = {
        '已认证': 'success',
        '待认证': 'warning',
        '认证失败': 'danger',
        '未认证': 'info'
      }
      return statusMap[status] || 'info'
    }
    
    // 生命周期
    onMounted(async () => {
      // 检查是否登录
      if (!userStore.isLoggedIn) {
        router.push('/login')
        return
      }
      
      // 加载用户数据和医生列表
      await Promise.all([
        loadUserData(),
        loadDoctors()
      ])
    })
    
    // 监听路由参数变化
    watch(() => route.params.id, async (newId) => {
      if (newId) {
        await loadUserData()
      }
    })
    
    return {
      loading,
      doctorsLoading,
      error,
      currentUser,
      currentUserRole,
      userCertification,
      selectedDoctor,
      selectedDoctorCertification,
      showEditProfile,
      showDoctorDetail,
      editFormRef,
      editForm,
      editRules,
      searchQuery,
      specialtyFilter,
      levelFilter,
      specialties,
      doctorLevels,
      filteredDoctors,
      isCurrentUser,
      defaultAvatar,
      handleCloseEdit,
      handleUpdateProfile,
      viewDoctorDetail,
      getUserInitial,
      formatDate,
      formatPhone,
      maskIdCard,
      getGenderText,
      getRoleTagType,
      getLevelTagType,
      getCertificationStatusText,
      getCertificationTagType
    }
  }
}
</script>

<style scoped>
.stroke-user-profile {
  min-height: calc(100vh - 60px);
  background: #f5f7fa;
  padding: 20px 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-text {
  margin-top: 16px;
  color: #606266;
}

.loading-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

/* 错误提示 */
.error-alert {
  margin-bottom: 20px;
}

/* 用户头部信息 */
.user-header-section {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-basic-info {
  display: flex;
  align-items: center;
  gap: 30px;
}

.user-details {
  flex: 1;
}

.user-name {
  margin: 0 0 12px 0;
  font-size: 28px;
  font-weight: 600;
  color: #303133;
}

.user-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 14px;
}

.user-role-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.certification-status {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #67c23a;
  font-weight: 500;
}

/* 用户信息卡片区 */
.user-info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.info-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: #303133;
}

.info-content {
  padding: 0;
}

.info-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 100px;
  color: #909399;
  font-size: 14px;
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  color: #303133;
  font-size: 14px;
}

/* 内容区域 */
.content-section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 20px;
  font-weight: 500;
}

/* 搜索筛选区域 */
.search-filter {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 300px;
}

.filter-select {
  width: 180px;
}

/* 医生列表 */
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
}

.doctor-card-item {
  transition: all 0.3s ease;
}

.hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.doctor-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doctor-avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.doctor-name-section {
  flex: 1;
}

.doctor-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.doctor-details p {
  margin: 6px 0;
  font-size: 14px;
  color: #606266;
}

.doctor-details p strong {
  color: #303133;
}

.status-已认证 {
  color: #67c23a;
}

.status-待认证 {
  color: #e6a23c;
}

.status-认证失败 {
  color: #f56c6c;
}

.status-未认证 {
  color: #909399;
}

.doctor-actions {
  display: flex;
  justify-content: flex-end;
}

/* 编辑表单 */
.edit-form {
  width: 100%;
}

/* 医生详情对话框 */
.doctor-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.doctor-detail-header {
  display: flex;
  align-items: center;
  gap: 30px;
}

.doctor-detail-info h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  color: #303133;
}

.doctor-detail-tags {
  display: flex;
  gap: 10px;
}

.doctor-detail-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.detail-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.detail-item {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  width: 120px;
  color: #909399;
  font-size: 14px;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  color: #303133;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .doctors-grid {
    grid-template-columns: 1fr;
  }
  
  .doctor-detail-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .user-header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .user-basic-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .user-info-cards {
    grid-template-columns: 1fr;
  }
  
  .search-filter {
    flex-direction: column;
  }
  
  .search-input,
  .filter-select {
    width: 100%;
  }
  
  .doctor-avatar-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .doctor-detail-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
  
  .user-header-section {
    padding: 20px;
  }
  
  .user-name {
    font-size: 24px;
  }
  
  .content-section {
    padding: 16px;
  }
}
</style>